<template>
  <!-- 题干富文本 -->
  <div class="SEditor">
    <textarea class="my_editor" id="Editortigan" v-model="Editortext"></textarea>
  </div>
</template>

<script>
// import baseurl from '../config/baseurl'
// let baseurl = process.env.VUE_APP_NRMS_URL;
let baseurl = 'http://localhost:3000';
// const hmacsha1 = require('hmacsha1')
export default {
  data () {
    return {
      Editortext: ''
    };
  },
  props: {
    content: {
      type: String
    },
    isShow: {
      type: Boolean
    }
  },
  // mounted () {
  // console.log(this.isShow)
  //   this.Editortext = this.content
  //   this.$tinymce.remove()
  //   this.tinymcetigan()
  // },
  watch: {
    'isShow': {
      immediate: true,
      handler (val) {
        if (val) {
          this.Editortext = this.content;
          // this.$tinymce.remove();
          this.tinymcetigan();
        }
      }
    }
  },
  beforeDestroy () {
    // 这个必须要加，不然初始化的时候会有问题
    this.$tinymce.remove();
  },
  methods: {
    tinymcetigan () {
      let _this = this;
      _this.$tinymce.baseURL = './static/tinymce';
      _this.$tinymce
        .init({
          selector: '#Editortigan',
          language_url: './static/tinymce/zh_CN.js', // 设置中文
          language: 'zh_CN',
          plugins: [
            // 配置插件：可自己随意选择，但如果是上传本地图片image和imagetools是必要的
            // 'lists image media table wordcount code fullscreen help  toc fullpage autosave nonbreaking insertdatetime visualchars visualblocks searchreplace spellchecker pagebreak link charmap paste print preview hr anchor'
            'image table fullscreen fullpage visualchars visualblocks searchreplace link preview hr'
          ], // 工具框，也可自己随意配置
          // toolbar:
          //   'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ',
          toolbar: [
            'undo redo | formatselect | cut copy selectall| bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent |  removeformat code  bullist numlist | lists image table | searchreplace preview hr'
            // 'newdocument undo redo | formatselect visualaid|cut copy paste selectall| bold italic underline strikethrough |codeformat blockformats| superscript subscript  | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent |  removeformat code  bullist numlist | lists image media table link |fullscreen help toc fullpage restoredraft | nonbreaking insertdatetime visualchars | visualblocks searchreplace spellchecker pagebreak anchor charmap | pastetext print preview hr'
          ],
          file_picker_types: 'media',
          // file_picker_callback: (cb, value, meta) => { // 配置 将在图片、媒体、链接对话框中加入上传文件回调
          //   // 当点击meidia图标上传时,判断meta.filetype == 'media'有必要，因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口
          //   if (meta.filetype === 'media') {
          //     // 创建一个隐藏的type=file的文件选择input
          //     let input = document.createElement('input');
          //     input.setAttribute('type', 'file');
          //     input.onchange = function () {
          //       const file = this.files[0]; // 只选取第一个文件。如果要选取全部，后面注意做修改
          //       let xhr, formData;
          //       xhr = new XMLHttpRequest();
          //       xhr.open('POST', baseurl + '/fileApi/fileOperations/upload');
          //       xhr.withCredentials = self.credentials;
          //       xhr.upload.onprogress = function (e) {
          //         // 进度(e.loaded / e.total * 100)
          //         let percent = e.loaded / e.total * 100;
          //         if (percent < 100) {
          //           _this.$tinymce.activeEditor.setProgressState(true); // 是否显示loading状态：1（显示）0（隐藏）
          //         } else {
          //           _this.$tinymce.activeEditor.setProgressState(false);
          //           // return
          //         }
          //       };
          //       xhr.onerror = function () {
          //         console.log(xhr.status);
          //         _this.$tinymce.activeEditor.setProgressState(false);
          //       };
          //       xhr.onload = function () {
          //         let json;
          //         if (xhr.status < 200 || xhr.status >= 300) {
          //           console.log('HTTP 错误: ' + xhr.status);
          //           return;
          //         }
          //         json = JSON.parse(xhr.responseText);
          //         // 假设接口返回JSON数据为{status: 0, msg: "上传成功", data: {location: "/localImgs/1546434503854.mp4"}}
          //         if (json.code === 200) {
          //           // 接口返回的文件保存地址
          //           console.log(json);
          //           let mediaLocation = baseurl + '/' + json.data.fileId;
          //           // cb()回调函数，将mediaLocation显示在弹框输入框中
          //           cb(mediaLocation, { title: file.name });
          //         } else {
          //           console.log(json.msg);
          //           // return
          //         }
          //       };
          //       formData = new FormData();
          //       // 假设接口接收参数为file,值为选中的文件
          //       formData.append('file', file);
          //       // 正式使用将下面被注释的内容恢复
          //       xhr.send(formData);
          //     };
          //     // 触发点击
          //     input.click();
          //   }
          // },
          // image_advtab: true,
          table_default_styles: {
            width: '100%',
            borderCollapse: 'collapse'
          },
          image_title: false, // 是否开启图片标题设置的选择，这里设置否
          automatic_uploads: true, // 图片异步上传处理函数
          imageupload_url: baseurl + '/fileApi/fileOperations/upload'
          // images_upload_handler: (blobInfo, success, failure) => { // 图片上传方法
          //   // var formData=new FormData();
          //   var uploaddatas = {};
          //   // debugger
          //   uploaddatas.ts = Date.now();
          //   // uploaddatas.signature = hmacsha1(
          //   //   baseurl.hmacsha1value,
          //   //   'ts=' + uploaddatas.ts
          //   // )
          //   var xhr, formData;
          //   xhr = new XMLHttpRequest();
          //   xhr.withCredentials = false;
          //   xhr.open(
          //     'POST',
          //     baseurl + '/fileApi/fileOperations/upload'
          //   );
          //   formData = new FormData();
          //   formData.append('file', blobInfo.blob());
          //   formData.append('ts', uploaddatas.ts);
          //   // formData.append('signature', uploaddatas.signature)
          //   xhr.onload = function (e) {
          //     var json;

          //     if (xhr.status !== 200) {
          //       failure('HTTP Error: ' + xhr.status);
          //       return;
          //     }
          //     json = JSON.parse(this.responseText);

          //     if (!json || typeof json.data.fileId !== 'string') {
          //       failure('Invalid JSON: ' + xhr.responseText);
          //       return;
          //     }
          //     success(baseurl + '/' + json.data.fileId);
          //   };
          //   xhr.send(formData);
          // },
          // init_instance_callback: function (editor) { // 初始化结束后 执行
          //   editor.on('NodeChange Change input KeyUp', () => {
          //     // 获取富文本编辑器里面的内容
          //     _this.Editortext = editor.getContent();
          //     if (_this.Editortext.length > 60000) {
          //       _this.$message.error('字符数过长');
          //       return;
          //     }
          //     _this.$emit('tigan', _this.Editortext);
          //   });
          // }
        })
        .then(resolve => {
          console.log(this);
          console.log(resolve);
          // 初始化富文本编辑器里面的内容
          resolve[0].setContent(_this.Editortext);
        });
    }
  }
};
</script>
<style>
.tox .tox-tbtn svg{
  /* fill: #008eff !important; */
}
  /* .SEditor {
    display: inline-block;
    width: calc(100% - 100px);
  }

  .SEditor .tox-tinymce {
    height: 400px !important;
  } */
</style>
